<template>
  <div>
    <el-card>
      <el-card>
        <el-cascader v-model="listQuery.categoryl3" class="filter-item" clearable :options="categoryList"
                     expand-trigger="hover" @change="handleCategoryChange" :placeholder="$t('请选择商品分类')"
                     :show-all-levels="false"></el-cascader>
        <el-select v-model="listQuery.goodsId" class="filter-item" :placeholder="$t('请选择商品名称')" clearable
                   @change="packageGoodsChangeSelect">
          <el-option v-for="item in goodsList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>

        <el-select v-model="listQuery.pointExchangeId" clearable class="filter-item" :placeholder="$t('请选择积分兑换名称')">
          <el-option v-for="item in piontsList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <el-select v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
          <el-option v-for="item in shops" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>

        <el-select v-model="listQuery.orderStatus" clearable class="filter-item" :placeholder="$t('请选择兑换来源')">
          <el-option v-for="item in orderSourceList" :key="item.id" :value="item.id" :label="item.name"></el-option>
        </el-select>
        <!-- <DateRangePicker v-model="listQuery.dateTime" :value-format="'yyyy-MM-dd hh:mm:ss'" /> -->
        <!-- <p>Selected Date Range: {{ listQuery.dateTime }}</p> -->
        <el-date-picker v-model="listQuery.dateTime" value-format="yyyy-MM-dd hh:mm:ss" type="daterange" align="right"
          unlink-panels range-separator="——" :start-placeholder='$t("Start_time")' :end-placeholder='$t("End_time")'
          :picker-options="pickerOptions">
        </el-date-picker>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"
          v-permission="['GET /admin/p/point_exchange_statistic']">{{$t('Search')}}</el-button>
      </el-card>
      <el-card>
        <el-descriptions class="margin-top" v-model="totalData" :title='$t("概况")' direction="vertical" :column="12"
          :size="size" border>
          <el-descriptions-item :label="$t('兑换次数')" :span="3">{{totalData.exchangeNum}}</el-descriptions-item>
          <el-descriptions-item :label="$t('总积分')" :span="3">{{totalData.point}}</el-descriptions-item>
          <el-descriptions-item :label="$t('总金额')" :span="3">{{totalData.price}}</el-descriptions-item>

        </el-descriptions>
      </el-card>

      <el-card>
        <!-- <el-input v-model="listQuery.pointExchangeName" clearable class="filter-item" style="width: 200px;"
        :placeholder="$t('请输入积分兑换名称')" />
2
      <el-button class="filter-item" type="info" icon="el-icon-search"
        @click="handleTypeStatistic">{{$t('Search')}}</el-button> -->
        <el-table :data="list" style="width: 100%" border>
          <el-table-column type="index" :index="getIndex" width="50" :label="$t('序号')" />
          <el-table-column align="center" prop="pointExchangeName" :label="$t('积分兑换名称')" />
          <el-table-column align="center" prop="ss" :label="$t('兑换次数占比')" />
          <el-table-column align="center" prop="point" :label="$t('总积分')" />
          <el-table-column align="center" prop="price" :label="$t('总金额')" />
          <el-table-column align="center" :label="$t('Operate')" width="400" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button icon="el-icon-view" type="info" plain1 size="mini"
                v-permission="['GET /admin/p/point_exchange_statistic']"
                @click="handleDetail(scope.row)">{{$t('Details')}}</el-button>
            </template>
          </el-table-column>

        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
          @pagination="handleTypeStatistic" />

      </el-card>
    </el-card>
  </div>

</template>

<script>
  import ElSelectDropdown from 'element-ui/packages/select/src/select-dropdown'
  import { statistic, statisticByType } from '../../api/lumiereSubscribeStatistic'
  import { listLocationRegion, listSubRegion } from '../../api/region'
  import { allForPerm } from '../../api/shop'
  import Pagination from '@/components/Pagination'
  import BackToTop from '@/components/BackToTop'
  import DateRangePicker from '@/components/DateRangePicker'
  import { couponStatistic, typeStatistic, typeUserStatistic } from '../../api/coupon'
  import { exchangeStatistics, exchangeTypeStatistics, getAllPointList } from '../../api/exchange'
  import { categoryl3, listShopGoodsAll } from '@/api/goods'

  export default {
    name: 'exchangeStatistic',
    components: { ElSelectDropdown, BackToTop, Pagination, DateRangePicker },
    data() {
      return {
        total: 0,
        locations: [],
        totalData: {
          exchangeNum: undefined,
          point: undefined,
          price: undefined,


        },
        list: [],
        shops: [],
        goodsList: [], // 商品集合
        categoryList: [], // 商品级别
        piontsList: [], // 积分列表
        orderSourceList: [
          { id: 1, name: '手机app下单' },
          { id: 2, name: '门店下单' },
          { id: 3, name: '官网商城' },
          { id: 4, name: '订阅' },
        ],
        listQuery: {
          startTime: undefined,
          endTime: undefined,
          pointExchangeName: undefined,
          page: 1,

          pointExchangeId: undefined,
          categoryl3: undefined,
          goodsId: undefined,
          shopId: undefined,
          orderSource: undefined,
          dateTime: undefined,
        },
        regionProps: { multiple: true, value: 'id', label: 'nameEn', emitPath: false },
        isSelectTime: true,
        props: {
          value: 'id',
          label: 'nameEn',
          children: 'children',
          checkStrictly: true
        },
        pickerOptions: {
          shortcuts: [{
            text: this.$t('Yesterday'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_7_days'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('Last_month'),
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }]
        },

      }
    },
    created() {
      this.handleFilter()
      this.getShopList()
      this.getGoodsList()
    },
    methods: {
      // 商品类目列表
      handleCategoryChange(value) {
        this.listQuery.categoryl3 = (value && value.length > 0) ? value[value.length - 1] : '';
      },
      // 查询所有商品
      getGoodsList() {
        listShopGoodsAll().then(response => {
          this.goodsList = response.data.data
        }).catch(() => {
          this.goodsList = []
        })
      },
      getShopList() {
        allForPerm().then((response) => {
          this.shops = response.data.data.list;
        });
        categoryl3().then(res => {
          this.categoryList = res.data.data
        })
        getAllPointList().then(res => {
          this.piontsList = res.data.data
        })
        //
        listShopGoodsAll().then(response => {
          this.goodsList = response.data.data
        }).catch(() => {
          this.goodsList = []
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
        this.handleTypeStatistic()
      },
      getList() {
        exchangeStatistics(this.listQuery).then(response => {
          this.totalData = response.data.data;
        })
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      },
      handleDetail(row) {
        this.$router.push({
          path: '/exchange/typeStatisticDetail',
          query: {
            totalData: row,
            startTime: this.listQuery.startTime,
            endTime: this.listQuery.endTime,
          }
        })
      },
      handleTypeStatistic() {
        exchangeTypeStatistics(this.listQuery).then(response => {
          this.list = response.data.data.list;
          this.list.forEach(exchange => {
            exchange.ss = exchange.exchangeNum + "(" + exchange.exchangePer + ")";
          })
        })
      },
    },

  }
</script>

<style scoped>

</style>
